<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Ztree</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
    <link href="./../../../static/plugins/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet" />
</head>

<body class="bg-white">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-3">
                    <div id="ztree1" class="ztree"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script type="text/javascript" src="./../../../static/plugins/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>

    <script type="text/javascript">
        var operateObj;
        $(function () {
            $.tree.init(
                {
                    id: 'ztree1',
                    url: './../../../static/data/tree.json',
                    expandLevel: -1,
                    check: {
                        enable: true
                    },
                    view: {
                        selectedMulti: false,
                        addHoverDom: addHoverDom,
                        removeHoverDom: removeHoverDom,
                    }
                }
            );
        });
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            var btnArea = $('<span id="btn_area_' + treeNode.tId + '"></span>');
            if ($("#btn_area_" + treeNode.tId).length > 0) {
                return;
            }

            //一级目录具有新增下级标签的功能
            var addBtn = $('<span class="button add" id="addBtn_' + treeNode.tId + '" title="新增"><span>');
            btnArea.append(addBtn);
            sObj.after(btnArea);
            if (addBtn) {
                addBtn.click(function () {
                    $.modal.msg('点击了' + treeNode.id+ '的新增按钮');
                });
            }


            var editBtn = $('<span class="button edit" id="editBtn_' + treeNode.tId + '" title="修改"><span>');
            btnArea.append(editBtn);
            if (editBtn) {
                editBtn.click(function () {
                    $.modal.msg('点击了' + treeNode.id+ '的修改按钮');
                });
            }


            var removeBtn = $('<span class="button remove" id="removeBtn_' + treeNode.tId + '" title="删除"><span>');
            btnArea.append(removeBtn);
            if (removeBtn) {
                removeBtn.click(function () {
                    $.modal.msg('点击了' + treeNode.id+ '的删除按钮');
                });
            }
            sObj.after(btnArea);
        }

        function removeHoverDom(treeId, treeNode) {
            $("#btn_area_" + treeNode.tId).unbind().remove();
        };
    </script>

</body>

</html>